<template>
	<el-row :gutter="40" v-loading="dataloading">
		<el-col v-if="!showEdit">
			<el-empty description="请先选择左侧菜单后操作" :image-size="100" style="margin-top: 200px"></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="12">
				<h2>{{ form.menuId!=null? "编辑菜单":"新增菜单"}}</h2>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
					<el-form-item label="菜单名称" prop="menuName">
						<el-input v-model="form.menuName" clearable placeholder="菜单显示名字"></el-input>
					</el-form-item>
					<el-form-item label="上级菜单" prop="parentId">
						<el-cascader v-model="form.parentId" :options="menuOptions" :props="menuProps" :show-all-levels="false" placeholder="顶级菜单" clearable disabled  style="width: 100%"></el-cascader>
					</el-form-item>
					<el-form-item label="菜单类型" prop="menuType">
						<el-radio-group v-model="form.menuType">
							<el-radio-button label="M">目录</el-radio-button>
							<el-radio-button label="C">菜单</el-radio-button>
							<!--el-radio-button label="F">按钮</el-radio-button-->
							<el-radio-button label="I">IFrame</el-radio-button>
							<el-radio-button label="L">外链</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="别名" prop="name">
						<el-input v-model="form.name" clearable placeholder="别名"></el-input>
						<div class="el-form-item-msg">如类型为Iframe的菜单，别名将代替源地址显示在地址栏</div>
					</el-form-item>
					<el-form-item label="菜单图标" prop="icon">
						<jdIconSelect v-model="form.icon" clearable></jdIconSelect>
					</el-form-item>
					<el-form-item :label="(form.menuType=='M'||form.menuType=='C')? '路由地址':'链接地址'" prop="path">
						<el-input v-model="form.path" clearable placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="视图" prop="component" v-if="form.menuType=='M'||form.menuType=='C'">
						<el-input v-model="form.component" clearable placeholder="">
							<template #prepend>views/</template>
						</el-input>
					</el-form-item>
					<el-form-item label="权限字符" prop="component" v-if="form.menuType=='C'">
						<el-input v-model="form.perms" clearable placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="路由参数" prop="component" v-if="form.menuType=='C'">
						<el-input v-model="form.query" clearable placeholder=""></el-input>
					</el-form-item>
					<!-- <el-form-item label="颜色" prop="color">
						<el-color-picker v-model="form.meta.color" :predefine="predefineColors"></el-color-picker>
					</el-form-item> -->
					<el-form-item label="显示状态" prop="visible">
						<jd-radio v-model="form.visible" dict="sys_show_hide"></jd-radio>
					</el-form-item>
					<el-form-item label="菜单状态" prop="status">
						<jd-radio v-model="form.status" dict="sys_normal_disable"></jd-radio>
					</el-form-item>
					<el-form-item label="整页路由" prop="fullpage" v-if="form.menuType=='M'||form.menuType=='C'">
						<el-switch v-model="form.fullpage" active-value="1" inactive-value="0"/>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" clearable placeholder=""></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submit" :loading="loading">保 存</el-button>
					</el-form-item>
				</el-form>

			</el-col>
			<el-col :lg="12" class="btnlist" v-if="form.menuType=='C'">
				<h2>按钮权限</h2>
				<jd-form-table v-model="form.permsList" :addTemplate="btnListAddTemplate" drag-sort :maxRow=10 placeholder="暂未设置按钮权限">
					<el-table-column prop="code" label="按钮名称" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.menuName" placeholder=""></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="url" label="权限标识">
						<template #default="scope">
							<el-input v-model="scope.row.perms" placeholder=""></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="open" label="状态" width="80" align="center">
						<template #default="scope">
							<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"></el-switch>
						</template>
					</el-table-column>
				</jd-form-table>
			</el-col>
		</template>
	</el-row>

</template>

<script>
	export default {
		emits: ['success','closed'],
		props: {
			menu: { type: Object, default: () => {} },
			showEdit: { type: Boolean, default: () => { false } },
		},
		data(){
			return {
				form: {
					menuId: "",
					parentId: "",
					name: "",
					path: "",
					component: "",
					redirect: "",
					icon: "",
					meta:{
						title: "",
						icon: "",
						active: "",
						color: "",
						type: "menu",
						fullpage: false,
						tag: "",
					},
					menuType: 'C',
					visible: '0',
					status: '0',
					permsList: []
				},
				menuOptions: [],
				menuProps: {
					value: 'id',
					label: 'title',
					checkStrictly: true
				},
				menuNode: undefined,
				predefineColors: [
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#67C23A',
					'#00ced1',
					'#409EFF',
					'#c71585'
				],
				rules: {
					menuName:[
						{required: true, message: ''}
					],
				},
				btnListAddTemplate: {
					menuName: "",
					perms: ""
				},
				dataloading: false,
				loading: false,
			}
		},
		watch: {
			menu: {
				handler(){
					this.menuOptions = this.treeToMap(this.menu)
				},
				deep: true
			},
			'form.menuType': function(val){
				if (val == 'I' || val == 'L'){
					this.form.component = ''
				}
			}
		},
		mounted() {

		},
		methods: {
			//简单化菜单
			treeToMap(tree){
				const map = []
				tree.forEach(item => {
					var obj = {
						id: item.id,
						parentId: item.parentId,
						title: item.label,
						children: item.children&&item.children.length>0 ? this.treeToMap(item.children) : null
					}
					map.push(obj)
				})
				return map;
			},
			//保存
			async submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.loading = true
						var mode = "append"
						var res = {}
						if (this.form.menuId == undefined){
							res = await this.$API.system.menu.addMenu.post(this.form)
							mode = "append"
						} else {
							res = await this.$API.system.menu.updateMenu.put(this.form)
							mode = "update"
						}
						console.log(this.form.permsList);
						if(res.code == 200){
							this.$emit('success', this.form, mode);
							this.$message.success("保存成功")
						}else{
							this.$message.warning(res.msg)
						}
						this.loading = false
					}
				})
			},
			//表单注入数据
			async setData(menuId,pid){
				this.dataloading = true;
				if (menuId != 0){
					var res = await this.$API.system.menu.getMenu.get(menuId);
					if (res.code == 200){
						Object.assign(this.form, res.data);
					}
				} else {
					this.form = {
						parentId: pid,
						menuType: 'C',
						visible: '0',
						status: '0',
					};
				}
				this.dataloading = false;
			}
		}
	}
</script>

<style scoped>
	h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
	.btnlist {border-left: 1px solid var(--el-border-color-light);}

	[data-theme="dark"] h2 {color: #fff;}
	[data-theme="dark"] .apilist {border-color: #434343;}
</style>
